<template>
<el-card class="box-card">
  <el-collapse class="tzy-collapse" v-model="activeNames" @change="handleChange">
    <el-collapse-item title="表单" :name="1">
        <el-row ref="fields">
          <el-col :span="6" v-for="(item,inx) in fields" :key="inx" :data-id="inx">
             <div class="tzy-grid">{{item.title}}</div>
          </el-col>
        </el-row>
    </el-collapse-item>
  </el-collapse>
  </el-card>
</template>
<script>
import components from '@/widgets/helper/setting/components';
import Sortable from 'sortablejs'
export default {
    data(){
        return {
            components: components,
            activeNames:1
        }
    },
    computed: {
      fields() {
        return this.components.filter(n => !n.helper)
      }
    },
    methods: {
      handleChange(){

      },
      createSortable(el, items) {
        return new Sortable(el, {
          group: {
            name: 'component',
            pull: 'clone',
            put: false
          },
          sort: false,
          animation: 150,
          setData: (dataTransfer, dragEl) => {
            const index = parseInt(dragEl.dataset.id)
            dragEl.__item__ = items[index]
          }
        })
      }
    },
    mounted() {
      this.fieldsSortable = this.createSortable(this.$refs.fields.$el, this.fields)
    },
    beforeDestroy() {
      this.fieldsSortable && this.fieldsSortable.destroy()
    }
}
</script>

<style scoped>
.tzy-collapse{
    border:1px solid #e6e6e6;
    padding:5px;
}
.tzy-grid{
    width:100%;
    height:100%;
    padding: 20px 0px;
    border:1px solid #e6e6e6;
    text-align: center;
    cursor: pointer;
}
</style>
